import React, { Component, Suspense } from 'react'
import { connect } from 'dva';
import EditQa from '@/pages/KnowledgeManagement/Overview/editQa';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Form,
  Button,
  Modal,
  Icon,
  Spin,
  Card,
  Pagination,
  Drawer
} from 'antd'
import styles from './index.less';
import noData from '@/assets/icons/暂无数据.png'
const FormItem = Form.Item;
export class Service extends Component {
  state = {
    total: 0,
    page: 1,
    pageSize: 10,
    id: '',
    pdx: 0,
    thesaurusList: [],
    colorName: null,
    serviceData: {},
    slotQaList: [],
    QaList: [],
    close: false,
    qaId: '',
    vueIf: false,
    vueIfA: false,
    vueIfB: false,
    questions: []

  }

  componentDidMount() {
    console.log(this.props)
    if (!this.props.item._id) {
      console.log('实体管理')
      this.setState({ id: this.props.item.id, vueIf: true }, () => { this.being() })
    } else { // 实体管理
      console.log('词槽管理')
      let data = this.props.item
      data.nameKey = `<${data.name}>-${data.key}`
      this.setState({ serviceData: data, id: this.props.item.id, vueIf: false }, () => { this.beingTwo() })
    }

  }

  being = () => {
    const { dispatch, currentUser } = this.props;
    const { id } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'service/basicDictSlotList',
        payload: { id, page: 1, limit: 99999 },
        callback: res => {
          let data = res.data.list
          data.map((item, index) => {
            item.nameKey = `<${item.name}>-${item.key}`
          })
          console.log(data)
          if (data.length) {
            this.setState({
              thesaurusList: data,
              serviceData: data[0]
            }, () => {
              this.basicSlotDialogList(data[0].id)
              this.basicSlotQaList(data[0].id)
            })
            console.log('主页增加内容', res);
          }
        },
      });
    });
  }

  beingTwo = () => {
    const { dispatch, currentUser } = this.props;
    const { id } = this.state
    this.reqRef = requestAnimationFrame(() => {
      this.basicSlotDialogList(id)
      this.basicSlotQaList(id)
    });
  }

  // 多轮列表
  basicSlotDialogList = (id) => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'service/basicSlotDialogList',
        payload: { id, page: 1, limit: 99999 },
        callback: res => {
          let data = res.data.list
          if (data.length) {
            this.setState({ vueIfA: true }, () => {
              console.log('多轮列表', data)
              this.setState({
                slotQaList: data,
              })
            })
          } else {
            this.setState({ vueIfA: false })
          }

        },
      });
    });
  }

  // 词槽使用中的知识点列表
  basicSlotQaList = (id) => {
    const { dispatch, currentUser } = this.props;
    const { page, pageSize } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'service/basicSlotQaList',
        payload: { id, page, limit: pageSize },
        callback: res => {
          let data = res.data.list
          if (data.length) {
            this.setState({ vueIfB: true }, () => {
              console.log('词槽使用中的知识点列表', data)
              this.setState({
                QaList: data,
                total: res.total
                // serviceData:data[0]
              })
            })
          } else {
            this.setState({ vueIfB: false })
          }


        },
      });
    });
  }

  showRev = (a, b) => {
    //  console.log(a,b)
    this.setState({ colorName: b })
  }

  showRevS = (a, b) => {
    // console.log(a,b)
    this.setState({ colorName: null })
  }

  handleDeletes = (e, index) => {
    console.log(e, index)
    this.setState({ pdx: index, serviceData: e }, () => {
      this.basicSlotDialogList(e.id)
      this.basicSlotQaList(e.id)
    })
  }

  onChangeB = (a) => {
    this.setState({ page: a }, () => {
      this.basicSlotQaList(this.state.serviceData.id)
    })
  }

  onShowSizeChangeB = (a, b) => {
    this.setState({ page: a, pageSize: b }, () => {
      this.basicSlotQaList(this.state.serviceData.id)
    })
  }

  // 新增
  addhandleOpen = (row) => {
    console.log('新增', row.std)
    this.setState({
      questions: Array(row.std),
      qaId: row.id
    }, () => {
      this.setState({ close: true })
    })
  }

  onClose = () => {
    this.setState({
      close: false,
      // isUpdate: true
    });

  };


  render() {

    return (

      <div>
        {this.state.vueIf ? <div className='cardxbj'>
          <div className={styles.flexA}>
            <div style={{ width: 4, height: 14, background: '#3f4959', marginRight: 19 }}></div>
            <span style={{ color: '#3f4959' }}>正在使用该实体的词槽</span>
          </div>
          <Card
            bordered={false}
            style={{ borderBottom: '1px dashed #dddddd' }}
          >
            {
              this.state.thesaurusList.map((item, index) => {
                let a = this.state.colorName === index ? '#1890ff' : 'rgba(0, 0, 0, 0.65)'
                let padding = this.state.pdx === index ? { padding: '7px 12px', backgroundColor: '#d6e0ff', cursor: 'pointer' } : { cursor: 'pointer', padding: '7px 12px', border: '1px solid #d6e0ff', color: a }
                return (
                  <span key={index} style={{ margin: '40px 0px' }}>
                    <span
                      onMouseOut={() => { this.showRevS(item, index) }}
                      onMouseOver={() => { this.showRev(item, index) }}
                      onClick={() => { this.handleDeletes(item, index) }}
                      style={padding}
                      key={index}
                      className={styles.tag}
                    >
                      {item.nameKey}
                    </span>
                  </span>
                )
              })
            }
          </Card>
        </div> : null
        }

        {
          this.state.vueIfA ? <div className='cardxbj' style={{ marginTop: 24 }}>
            <div style={{ margin: '10px 0px' }} className={styles.flexA}>
              <div style={{ width: 4, height: 14, background: '#3f4959', marginRight: 19 }}></div>
              <span style={{ color: '#3f4959' }}>正在使用词槽  <span style={{ padding: '7px 12px', border: '1px solid #d6e0ff' }} className={styles.tags}>{this.state.serviceData.nameKey}</span>的多轮会话</span>
            </div>
            <Card
              bordered={false}
              style={{ borderBottom: '1px dashed #dddddd' }}
            >
              {/* slotQaList */}
              {
                this.state.slotQaList.map((item, index) => {
                  let padding = { cursor: 'pointer', padding: '7px 12px', border: '1px solid #6bb8ff', background: '#f2faff', color: '#0079e8' }
                  return (
                    <span key={index} style={{ margin: '40px 0px' }}>
                      <span
                        style={padding}
                        key={index}
                        className={styles.tag}
                      >
                        {item.name}
                      </span>
                    </span>
                  )
                })
              }
            </Card>

          </div> : null
        }


        {
          this.state.vueIfB ? <div className='cardxbj' style={{ marginTop: 24 }}>
            <div style={{ margin: '10px 0px' }} className={styles.flexA}>
              <div style={{ width: 4, height: 14, background: '#3f4959', marginRight: 19 }}></div>
              <span style={{ color: '#3f4959' }}>正在使用词槽  <span style={{ padding: '7px 12px', border: '1px solid #d6e0ff' }} className={styles.tags}>{this.state.serviceData.nameKey}</span>的知识点</span>
            </div>
            <Card
              bordered={false}
            >
              {/* slotQaList */}
              {
                this.state.QaList.map((item, index) => {
                  let padding = { cursor: 'pointer', background: '#f8f9fe', color: '#333333' }
                  return (
                    <p key={index} onClick={() => { this.addhandleOpen(item) }}>
                      <div
                        style={padding}
                        key={index}
                        className={styles.mag}
                      >
                        <div style={{ padding: '10px 20px' }}>{item.std}</div>
                      </div>
                    </p>
                  )
                })
              }

              <Pagination
                style={{ float: 'right' }}
                total={this.state.total}
                pageSize={this.state.pageSize}  // 显示几条一页
                current={this.state.page} // 当前页
                showSizeChanger={true}  // 是否显示可以设置几条一页的选项
                showQuickJumper={true}
                onChange={this.onChangeB}
                onShowSizeChange={this.onShowSizeChangeB}
              />
            </Card>

          </div> : null
        }


        <Drawer
          title={<FormattedMessage id="app.overView.editQa" />}
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.close}
          width={800}
          destroyOnClose
        >

          <EditQa qaId={this.state.qaId} questions={this.state.questions} onClose={this.onClose} />
        </Drawer>
      </div>
    )
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(Service));
